<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content cbafter">
            <div class="w220 fl">
                <menu-list></menu-list>
            </div>
            <div class="w980 fr">
                <div class="h1_tit">
                    <h1>{{interactionTitle}}</h1>
                    <button class="fr default ok" @click="getinteractcon">刷新页面</button>
                </div>
                <div class="bs-example-modal-lg">
                    <div class="modal-dialog modal-lg">
                        <div class="modal-content" id="edit">
                            <div class="modal-body cbafter">
                                <div class="cbafter banner">
                                    <div class="fl">
                                        <!-- <img :src="docinfo.avatarFileId"> -->
                                        <img :src="docinfo.avatarFileId">
                                    </div>
                                    <div class="fl">
                                        <p><span class="name">{{docinfo.name}}</span><span>{{docinfo.levelText}}</span> <span class="name">{{docinfo.orgName}}</span><span class="name">|</span><span class="name">{{docinfo.deptName}}</span></p>
                                        <p><span>擅长：</span><span>{{docinfo.speciality}}</span></p>
                                    </div>
                                </div>
                                <div class="list">
                                    <div class="unit cbafter" v-for="(index,item) in questionlist">
                                        <div class="up cbafter">
                                            <div class="col-md-3">
                                                <div class="col-md-2 nopadd">
                                                    <p class="question">问</p>
                                                </div>
                                                <div class="col-md-3"><img :src="item.avatar"></div>
                                                <div class="col-md-7"><span class="name1">{{item.qestionerName}}：</span>{{item.qestionerSex=='1'?"男":"女"}}</div>
                                            </div>
                                            <div class="col-md-6">
                                                <h3>{{item.question}}</h3>
                                                <img class="imgupload" :src="item.attachFile1" @click="showbigimg" v-if="item.attachFile1!=0">
                                                <img class="imgupload" :src="item.attachFile2" @click="showbigimg" v-if="item.attachFile2!=0">
                                                <img class="imgupload" :src="item.attachFile3" @click="showbigimg" v-if="item.attachFile3!=0">
                                            </div>
                                            <div class="col-md-3">
                                                <p>发表：{{item.questionTime}}</p>
                                                <button @click="reply(item)" class="default orange">回复患者</button>
                                            </div>
                                        </div>
                                        <div class="down cbafter" v-for="(sindex,sitem) in item.healthInteractionAnswerList">
                                            <div class="col-md-3">
                                                <div class="col-md-2 nopadd">
                                                    <p class="answer">答</p>
                                                </div>
                                                <div class="col-md-3"><img :src="sitem.avatar"></div>
                                                <div class="col-md-6 name1">{{sitem.answerName}}</div>
                                            </div>
                                            <div class="col-md-9">
                                                {{sitem.answerContent}}
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="modal fade" id="replymodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">回复内容</h4>
                    </div>
                    <form class="cbafter" id="search" v-on:submit.prevent="submitreply">
                        <div class="modal-body">
                            <div class="form-group">
                                <div class="col-md-12">
                                    <textarea class="form-control" rows="9" placeholder="请输入回复内容" v-model="replysave.answerContent" required></textarea>
                                </div>
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="submit" class="default blue center">提交</button>
                        </div>
                    </form>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
        <!-- 显示大图 -->
        <div class="modal fade" id="bigimg" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-body">
                        <img src="" width="500" height="auto">
                    </div>
                </div>
                <!-- /.modal-content -->
            </div>
            <!-- /.modal -->
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
module.exports = {
    data() {
            return {
                questionlist: [],
                docinfo: {
                    name: "",
                    avatarFileId: "",
                    levelText: "",
                    orgName: "",
                    deptName: "",
                    speciality: ""
                },
                interactionTitle: "",
                replysave: {
                    "detailId": "", //健康互动明细
                    "answerType": "031", //答复人类型,base_objectType 031医生 041患者
                    // "answerName": "", //答复人名称
                    // "answerId": "", //答复人id
                    "answerContent": "" //答复内容

                }
            }
        },
        components: {
            moduleHead, menuList
        },
        ready() {
            var that = this;
            this.getinteractcon();
        },

        methods: {
            //获取健康互动
            getinteractcon() {
                    var that = this;
                    var interactionId = Public.getParameter("interactionId");
                    $.when(Public.commonajax("coms.healthInteractionService", "getHealthInteractionDetail", "['" + interactionId + "']"))
                        .done(function(res) {
                            if (res.code == 200) {
                                that.docinfo = res.body.doctorBean;
                                that.interactionTitle = res.body.interactionTitle;
                                that.docinfo.avatarFileId = Public.IMGVIEW_URL() + that.docinfo.avatarFileId;
                                if (res.body.healthInteractionDetailVoList.length && res.body.healthInteractionDetailVoList.length > 0) {
                                    $.each(res.body.healthInteractionDetailVoList, function(index, el) {
                                        el.avatar = Public.IMGVIEW_URL() + el.avatar;
                                        el.attachFile1 = el.attachFile1 == 0 ? "0" : Public.IMGVIEW_URL() + el.attachFile1;
                                        el.attachFile2 = el.attachFile2 == 0 ? "0" : Public.IMGVIEW_URL() + el.attachFile2;
                                        el.attachFile3 = el.attachFile3 == 0 ? "0" : Public.IMGVIEW_URL() + el.attachFile3;
                                        if (el.healthInteractionAnswerList && el.healthInteractionAnswerList.length > 0) {
                                            $.each(el.healthInteractionAnswerList, function(index2, el2) {
                                                el2.avatar = Public.IMGVIEW_URL() + el2.avatar;
                                            });
                                        }

                                    });
                                }
                                that.questionlist = res.body.healthInteractionDetailVoList;

                            }

                        })

                },
                //提交回复
                submitreply() {
                    var that=this;
                    $.when(Public.commonajax("coms.healthInteractionService", "saveHealthInteractionAnswer", "[" +JSON.stringify( this.replysave)+ "]"))
                        .done(function(res) {
                            if (res.code === 200) {
                                Public.ajaxPrompt("回复成功");
                                that.getinteractcon();
                            }
                        })
                },
                reply(item) {
                    $("#replymodal").modal("show");
                     this.replysave={
                    "detailId": item.detailId, //健康互动明细
                    "answerType": "031", //答复人类型,base_objectType 031医生 041患者
                    "answerContent": "" //答复内容

                }
                },
                showbigimg(event) {

                    var imgurl = $(event.target).attr("src");
                    console.log(imgurl);
                    $("#bigimg").find("img").attr({
                        src: imgurl
                    });
                    $("#bigimg").modal("show");
                }

        },
        events: {

        },
}
</script>
<style scoped>
.content .modal-dialog {
    margin: 0;
}

.content #edit .modal-body {
    padding: 0;
}

.modal-lg {
    width: 940px
}

.w980 {
    padding: 0
}

.banner {
    background: #4590bc url(../../assets/img/banner1.png) no-repeat right bottom;
    height: 120px;
    padding: 20px;
    color: #fff;
    font-size: 12px;
}

.banner img {
    height: 63px;
    width: 63px;
    border-radius: 50%;
    margin-right: 10px;
}

.banner p span {
    margin-left: 10px;
    height: 24px;
    line-height: 24px;
}

.banner .name {
    color: #7BBADD;
    font-size: 14px;
}

.banner .orgname {
    padding-right: 10px
}

.list {
    padding: 30px
}

.list .unit {
    border: 1px solid #ccc;
    background: #FAFAFA;
    border-radius: 5px;
    line-height: 30px;
    margin-bottom: 20px;
}

.list .unit .up,
.list .unit .down {
    padding: 15px 0;
}

.list .unit .up {
    border-bottom: 1px solid #E9EEF2;
}

.list .unit .up h3 {
    font-size: 14px;
    font-weight: bold;
    line-height: 30px
}

.list .unit .name1 {
    color: #1dc499
}

.list .unit .grey {
    color: #999
}

.list .unit .default.orange {
    margin-top: 15px;
}

.list .unit .col-md-3 .col-md-3 img {
    width: 30px;
    height: 30px;
    border-radius: 50%
}

.list .unit .down {
    padding-bottom: 20px
}

.list .unit .question {
    background: #1FC49A;
    color: #fff;
    text-align: center;
    width: 30px;
    height: 30px;
}

.list .unit .answer {
    background: #4DB3F1;
    color: #fff;
    text-align: center;
    width: 30px;
    height: 30px;
}

.nopadd.col-md-2 {
    padding-right: 15px;
    padding-left: 0
}

.imgupload {
    height: 80px;
    width: auto;
    display: inline-block;
    position: relative;
    transition: opacity .25s ease-in-out, background .25s ease-in-out;
    -moz-transition: opacity .25s ease-in-out, background .25s ease-in-out;
    -webkit-transition: opacity .25s ease-in-out, background .25s ease-in-out;
    vertical-align: middle;
    z-index: 1;
    color: #fff;
    text-decoration: none;
    opacity: 100;
    float: left;
}

.imgupload:hover {
    opacity: 0.9;
    color: #fff;
    background: rgba(0, 0, 0, 0.2);
    cursor: pointer;
    margin-left: 5px;
}

#bigimg img {
    display: block;
    margin: 0 auto;
}

#replymodal .modal-body {
    height: 220px
}

#replymodal .modal-footer {
    border: none
}
</style>
